<template>
  <el-dialog ref="drawer" :title="title" :visible.sync="drawer" close-on-press-escape destroy-on-close
    @close="resetForm('ruleForm')">
    <div class="draw-body" style="padding: 0 50px">
      <el-form v-if="drawer" ref="ruleForm" :model="hkinfo" :rules="rules" label-width="120px" class="demo-ruleForm"
        label-suffix=":">
        <el-row>
          
          
            
         
         
         
           
            
             
           
            <el-col :span="24">
              <el-form-item label="焊口名称" prop="hkname">
                <el-input v-model="hkinfo.hkname" maxlength="20" show-word-limit />
              </el-form-item>
            </el-col>
           
            <el-col :span="24">
              <el-form-item label="焊口编码" prop="hkcode">
                <el-input v-model="hkinfo.hkcode" maxlength="20" show-word-limit  />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单位名称" prop="dwname">
                <el-input v-model="hkinfo.dwname" maxlength="20" show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工艺名称" prop="byzd1">
                <el-input v-model="hkinfo.byzd1" maxlength="20" show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工艺编码" prop="byzd2">
                <el-input v-model="hkinfo.byzd2" maxlength="20" show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="焊口时间" prop="hktime">
                <el-date-picker  value-format="yyyy-MM-dd HH:mm:ss" v-model="hkinfo.hktime" maxlength="20"  type= 'datetime'
           show-word-limit />
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="drawer = false">取消</el-button>
      <el-button type="primary" @click.native="submitForm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    postHandle
  } from '@/api'
  import {
    validPhone
  } from '@/utils/validate'
  import {
    getEntSpaceId,
    getSpaceId
  } from '@/utils/auth'
  export default {
    data() {
      const validatePhone = (rule, value, callback) => {
        if (!validPhone(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      }
      return {
        drawer: false,
        title: '',
        userType: 1,
        id: null,
        hkinfo: {
          xmcode:this.$store.state.project.object.id,
          xmname:this.$store.state.project.object.name,
          dwcode:this.$store.state.project.spaceId,
          hkname: null,
          hkcode: null,
          dwname: null,
          byzd1: null,
          byzd2: null,
          hktime: null,
         
        },
        rules: {
        
          hkname: [{
            required: true,
            message: '请输入焊口名称',
            trigger: 'change'
          }],
          hkcode: [{
            required: true,
            message: '请输入焊口编码',
            trigger: 'blur'
          }],
          dwname: [{
              required: true,
              message: '请输入单位名称',
              trigger: 'blur'
            }],
            byzd1: [{
              required: true,
              message: '请输入工艺名称',
              trigger: 'blur'
            }],
            byzd2: [{
              required: true,
              message: '请输入工艺编码',
              trigger: 'blur'
            }],
            hktime: [{
              required: true,
              message: '请选择焊口时间',
              trigger: 'blur'
            }],
         
        },

        personalList: [],
        persnoalPage: {
          p: 1,
          ps: 9999
        }
      }
    },
    watch: {
      userType: {
        handler(v) {
          if (v) this.getPerson()
        },
        immediate: true
      }
    },
    methods: {
      open(type, id) {
        this.type = type
        this.title = this.type === 'add' ? '新增' : '修改'
        if (this.type === 'edit') {
          this.userType = 0
          this.id = id
          this.getUserInfoById()
        }
       
        this.getPerson()
        this.drawer = true
      },

      handleAvatarSuccess(res, file) {
        this.object.picture = res.result[0]
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 100
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
        }
        return isLt2M
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.type === 'add') {
              this.addTemporaryWorker();
            }else{
              this.editTemporaryWorker();
            }
           
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      
 // 修改焊口信息
 editTemporaryWorker() {
        postHandle(
            '/api/v1/welder-sbtx-second/hankoucomb-info/update/' + this.id, {
              hkinfo: this.hkinfo
            }
          )
          .then((response) => {
            this.$emit('getList')
            this.drawer = false
          })
          .catch((error) => {
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(key + '.' + data[key]))
            }
          })
      },
      // 添加焊口信息
      addTemporaryWorker() {
        postHandle(
            '/api/v1/welder-sbtx-second/hankoucomb-info/create', {
              hkinfo: this.hkinfo
              }
          )
          .then((response) => {
            this.$emit('getList')
            this.drawer = false
          })
          .catch((error) => {
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(key + '.' + data[key]))
            }
          })
      },

      

      getUserInfoById() {
        postHandle(`/api/v1/welder-sbtx-second/hankoucomb-info/show/${this.id}`, {})
          .then((response) => {

            this.hkinfo = {
              xmcode:this.$store.state.project.object.id,
              xmname:this.$store.state.project.object.name,
              dwcode:this.$store.state.project.spaceId,
              hkname: response.result.hkname,
              hkcode:  response.result.hkcode,
              dwname:  response.result.dwname,
              byzd1:  response.result.byzd1,
              byzd2:  response.result.byzd2,
              hktime:  response.result.hktime,
            }
             
          })
          .catch((error) => {
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(key + '.' + data[key]))
            }
          })
      },

      resetForm(formName) {
        this.$refs[formName].resetFields()
      },

      getPerson() {
        const req = {
          d: {
            filters: [{
              field: 'spaceId',
              operator: 'EQUALS',
              value: getEntSpaceId()
            }],
            page: this.persnoalPage,
            retPage: true
          },
          obj: {
            flag: true
          }
        }
        postHandle(
          '/api/v1/welder-uac-second/space-user-member-comb/get-list',
          req
        ).then((response) => {
          this.personalList = response.result
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>